<!--
 * @Author: xuwejie 1529315455@qq.com
 * @Date: 2023-08-28 14:39:14
 * @LastEditors: xuwejie 1529315455@qq.com
 * @LastEditTime: 2023-11-15 13:58:17
 * @FilePath: \v9\src\views\index\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="dashboard-container main_spac">
    <div
      class="up_data"
      v-bind:style="{ left: boxright + 'px' }"
      v-if="document_status == 1"
    >
      <div class="up_Pic" @click="godocument_url">
        <img
          class="up_img"
          src="../../assets/images/updata.png"
          alt=""
          srcset=""
        />
        <div class="up_txt">有更新啦！</div>
      </div>
    </div>

    <div
      :class="[{ mainin_box_nodata: main_loading }, 'mainin_ul']"
      @click="mainin_ex = false"
      v-loading="main_loading"
      element-loading-text="拼命加载中..."
    >
      <el-row :gutter="15">
        <!-- 左侧两个格子 -->
        <el-col :xs="24" :sm="24" :md="18" :lg="18" :xl="18">
          <el-row :gutter="15">
            <el-col
              :xs="24"
              :sm="12"
              :md="12"
              :lg="12"
              :xl="12"
              v-for="(item, index) in leftCardList"
              :key="index"
              style="margin-bottom: 15px"
            >
              <enclo-card
                :item="item"
                @changeEcharts="changeEcharts"
                @opendown="opendown"
              >
                <template v-slot:header>
                  <!-- 今日简报 -->
                  <el-row :gutter="26">
                    <div class="card" v-if="item.name == '今日简报'">
                      <div v-for="(lists, index) in item.cardBox" :key="index">
                        <div class="cardBox" v-if="lists.iconName">
                          <div
                            :style="{
                              width: `${lists.iconWidth}px`,
                              height: `${lists.iconHeight}px`,
                            }"
                          >
                            <!-- <img :src="lists.iconSrc" alt="" /> -->
                            <svg-icon :icon-class="lists.iconSrc" />
                          </div>
                          <div class="cardBox_span">
                            <span class="cardBox_span-title">{{
                              lists.iconName
                            }}</span>
                            <span class="cardBox_span-num">{{
                              list[lists.iconValue] || 0
                            }}</span>
                            <!-- <span class="cardBox_span-num" v-else>{{
                              list[lists.iconValue]
                                ? parseFloat(list[lists.iconValue]).toFixed(2)
                                : "0"
                            }}</span> -->
                          </div>
                        </div>
                        <div class="nullCardBox" v-else>
                          <span class="nullCardBox-title">...</span>
                        </div>
                      </div>
                    </div>
                  </el-row>

                  <!-- 待处理 -->
                  <el-row :gutter="26">
                    <div class="cards" v-if="item.name == '待处理'">
                      <div
                        v-for="(lists, index) in item.cardBox"
                        :key="index"
                        @click="navTo(lists)"
                      >
                        <div class="cardBox">
                          <div class="cardBox-title">
                            {{ lists.iconName }}
                          </div>
                          <div class="cardBox-content">
                            <div>
                              <span class="cardBox-content-num">{{
                                list[lists.iconValue] || 0
                              }}</span
                              >单
                            </div>

                            <div
                              :style="{
                                width: `${lists.iconWidth}px`,
                                height: `${lists.iconHeight}px`,
                              }"
                            >
                              <img :src="lists.iconSrc" alt="" />
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </el-row>

                  <!-- 预警信息 -->
                  <el-row :gutter="25">
                    <div class="card_yujing" v-if="item.name == '预警信息'">
                      <div v-for="(list, index) in item.cardBox" :key="index">
                        <div class="yujingcatd">
                          <span class="yujingcatd-num">{{ list.iconNum }}</span>
                          <span class="yujingcatd-title">{{
                            list.iconName
                          }}</span>
                        </div>
                      </div>
                    </div>
                  </el-row>

                  <!-- 下单金额曲线 -->
                  <el-row>
                    <div
                      v-if="item.name == '下单金额曲线'"
                      id="chartColumn1"
                      style="width: 95%; height: 320px"
                    ></div>
                  </el-row>
                  <!-- 各大类占比 -->
                  <el-row>
                    <div
                      v-if="item.name == '各大类占比'"
                      id="chartColumn2"
                      style="width: 100%; height: 340px"
                    ></div>
                  </el-row>
                  <!-- 单品 TOP5 -->
                  <el-row>
                    <div
                      v-if="item.name == '单品 TOP5'"
                      id="chartColumn3"
                      style="width: 100%; height: 340px"
                    ></div>
                  </el-row>
                </template>
              </enclo-card>
            </el-col>
          </el-row>
        </el-col>

        <!-- 右侧一个格子 -->
        <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
          <div
            v-for="(item, index) in rightCardList"
            :key="index"
            style="margin-bottom: 15px"
          >
            <enclo-right-card :item="item" @navToMore="navToMore">
              <template v-slot:header>
                <!-- 天气 -->
                <weather v-if="item.name == '天气'"></weather>

                <!-- 行业资讯 -->
                <div
                  v-else-if="item.name == '行业资讯'"
                  class="hangyezixun"
                  style="max-height: 162px"
                >
                  <div
                    class="hangyezixun-box"
                    style="padding: 9px 0 10px 0"
                    v-for="(lists, indexs) in article"
                    :key="indexs"
                    @click="handleArticle(lists.id, 1)"
                  >
                    <el-col :span="16">
                      <div class="hangyezixun-box-left">
                        <span class="hangyezixun-box-left-top">{{
                          lists.title
                        }}</span>
                        <span class="hangyezixun-box-left-bottom">{{
                          lists.intro
                        }}</span>
                      </div>
                    </el-col>
                    <el-col :span="8">
                      <span class="hangyezixun-box-right">{{
                        parseTime(lists.add_time, "{y}-{m}-{d}")
                      }}</span>
                    </el-col>
                  </div>
                </div>

                <!-- 招标信息 -->
                <div
                  v-else-if="item.name == '招标信息'"
                  class="hangyezixun"
                  style="max-height: 150px"
                >
                  <div
                    class="hangyezixun-box"
                    style="height: 30px; line-height: 30px"
                    v-for="(lists, indexs) in tender"
                    :key="indexs"
                    @click="handleArticle(lists, 2)"
                  >
                    <el-col :span="16">
                      <div class="hangyezixun-box-left">
                        <span class="hangyezixun-box-left-top">{{
                          lists.title
                        }}</span>
                      </div>
                    </el-col>
                    <el-col :span="8">
                      <span class="hangyezixun-box-right">{{
                        parseTime(lists.created_at, "{y}-{m}-{d}")
                      }}</span>
                    </el-col>
                  </div>
                </div>

                <!-- 意见反馈 -->
                <div
                  ref="fatherEnclo"
                  v-else-if="item.name == '意见反馈'"
                  class="yijian"
                >
                  <!-- style="max-height: 90px" -->
                  <el-form
                    ref="yijianForm"
                    :model="yijianForm"
                    style="margin-top: 10px"
                    :rules="yijianRules"
                  >
                    <el-form-item label="" prop="content">
                      <el-input
                        v-model="yijianForm.content"
                        type="textarea"
                        :rows="5"
                        maxlength="200"
                        show-word-limit
                        placeholder="请输入需求、改进建议，反馈程序缺陷及投诉、举报，200字以内"
                      ></el-input>
                    </el-form-item>
                    <el-form-item label="" prop="phone">
                      <el-input
                        style="width: 100%"
                        v-model="yijianForm.phone"
                        maxlength="11"
                        show-word-limit
                        clearable
                        placeholder="请输入手机号"
                      ></el-input>
                    </el-form-item>
                    <el-form-item label="">
                      <el-select
                        style="width: 100%"
                        clearable
                        v-model="yijianForm.type"
                        placeholder="请选择分类"
                      >
                        <el-option
                          v-for="(item, index) in classFil"
                          :key="index"
                          :label="item.name"
                          :value="item.val"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="">
                      <el-upload
                        class="upload-demo"
                        :action="uploadPath"
                        :on-preview="handlePreview"
                        :on-remove="handleRemove"
                        :before-remove="beforeRemove"
                        :on-success="changeSuccess"
                        multiple
                        :limit="3"
                        :on-exceed="handleExceed"
                        :file-list="fileList"
                      >
                        <el-button size="small" type="primary"
                          >上传图片</el-button
                        >
                        <div slot="tip" class="el-upload__tip">
                          只能上传PNG/JPG文件，且不超过500kb
                        </div>
                      </el-upload>
                    </el-form-item>
                    <el-form-item>
                      <el-button
                        style="width: 100%"
                        type="primary"
                        @click="onSubmit"
                        >立即提交</el-button
                      >
                    </el-form-item>
                  </el-form>
                </div>

                <!-- 帮助中心 -->
                <div v-else-if="item.name == '帮助中心'" class="bangzhu">
                  <div
                    @click="handleHelpCenter"
                    style="width: 100%; height: 100px"
                  >
                    <img src="../../assets/images/help.png" />
                  </div>
                  <!-- <div class="bangzhus">
                    <el-col
                      :span="12"
                      v-for="(lists, indexs) in item.cardBox"
                      :key="indexs"
                      @click.native="handleHelpCenter(indexs + 1)"
                    >
                      <div class="bangzhudata">
                        <img
                          :src="lists.iconSrc"
                          :style="{
                            width: `${lists.iconWidth}px`,
                            height: `${lists.iconHeight}px`,
                          }"
                          alt=""
                        />
                        <span class="bangzhudata-title">{{
                          lists.iconName
                        }}</span>
                      </div>
                    </el-col>
                  </div>
                  <span class="title">帮助热线：400-656-9798</span> -->
                </div>

                <!-- 更新记录 -->
                <div
                  v-else-if="item.name == '更新记录'"
                  class="hangyezixun"
                  style="max-height: 150px"
                >
                  <div
                    class="hangyezixun-box"
                    style="height: 30px; line-height: 30px"
                    v-for="(lists, indexs) in upgrade"
                    :key="indexs"
                    @click="jumpUpdate(lists)"
                  >
                    <el-col :span="10">
                      <span class="gengxinshijian">
                        [{{ parseTime(lists.created_at, "{y}-{m}-{d}") }}]</span
                      >
                    </el-col>
                    <el-col :span="14">
                      <div class="gengxinneirong">
                        {{ lists.title }}
                      </div>
                    </el-col>
                  </div>
                </div>
              </template>
            </enclo-right-card>
          </div>
        </el-col>
      </el-row>
      <!-- <ul class="boxha">
        <template v-for="(item, index) in main_index"> -->
      <!-- 今日简报 -->
      <!-- <li v-if="item == 1" :key="index">
            <div class="mainin_ulb">
              <div class="mainin_h">
                <span class="main_title">今日简报</span>
                <div class="bigdata">
                  <el-tooltip class="item" effect="dark" content="数据大屏" placement="top">
                    <img src="@/assets/images/big_data.png" style="width: 19px; height: 19px"
                      @click.stop="jumpbigdata(1)" />
                  </el-tooltip>
                </div>
              </div>
              <div class="mainin_jb">
                <ul class="boxha">
                  <li>
                    <div class="mainin_jbm">
                      <h3>新增订单</h3>
                      <p>
                        <span>{{ list.order_increased }}</span>
                      </p>
                    </div>
                  </li>
                  <li>
                    <div class="mainin_jbm">
                      <h3>订单金额</h3>
                      <p>
                        <span>{{ list.order_increased_money }}</span>
                      </p>
                    </div>
                  </li>
                  <li>
                    <div class="mainin_jbm">
                      <h3>同比增长</h3>
                      <p>
                        <span>{{ list.order_growth }}%</span>
                      </p>
                    </div>
                  </li>
                  <li>
                    <div class="mainin_jbm">
                      <h3>用户下单率</h3>
                      <p>
                        <span>{{ list.order_rate }}%</span>
                      </p>
                    </div>
                  </li>
                  <li>
                    <div class="mainin_jbm">
                      <h3>客单价</h3>
                      <p>
                        <span>{{ list.unit_price }}</span>
                      </p>
                    </div>
                  </li>
                  <li>
                    <div class="mainin_jbm">
                      <h3>&nbsp;</h3>
                      <p>
                        <span>...</span>
                      </p>
                    </div>
                  </li>
                  <li>
                    <div class="mainin_jbm">
                      <h3>配送订单</h3>
                      <p>
                        <span>{{ list.order_day_send }}</span>
                      </p>
                    </div>
                  </li>
                  <li>
                    <div class="mainin_jbm">
                      <h3>下单金额</h3>
                      <p>
                        <span>{{ list.order_money }}</span>
                      </p>
                    </div>
                  </li>
                  <li>
                    <div class="mainin_jbm">
                      <h3>配送金额</h3>
                      <p>
                        <span>{{ list.send_money }}</span>
                      </p>
                    </div>
                  </li>
                  <li>
                    <div class="mainin_jbm">
                      <h3>采购进度</h3>
                      <p>
                        <span>{{ list.purchase_percent }}%</span>
                      </p>
                    </div>
                  </li>
                  <li>
                    <div class="mainin_jbm">
                      <h3>订单分拣进度</h3>
                      <p>
                        <span>{{
                          list.sort_rate
                          ? parseFloat(list.sort_rate).toFixed(2)
                          : "0"
                        }}%</span>
                      </p>
                    </div>
                  </li>
                  <li>
                    <div class="mainin_jbm">
                      <h3>发货进度</h3>
                      <p>
                        <span>{{
                          list.send_rate
                          ? parseFloat(list.send_rate).toFixed(2)
                          : "0"
                        }}%</span>
                      </p>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </li> -->
      <!--待处理  -->
      <!-- <li v-if="item == 2" :key="index">
            <div class="mainin_ulb">
              <div class="mainin_h">
                <span class="main_title">待处理</span>
                <div class="bigdata">
                  <el-tooltip
                    class="item"
                    effect="dark"
                    content="系统流程"
                    placement="top"
                  >
                    <img
                      src="@/assets/images/process.svg"
                      style="width: 19px; height: 19px"
                      @click.stop="jumpbigdata(3)"
                    />
                  </el-tooltip>
                </div>
              </div>
              <div class="mainin_jx">
                <ul class="boxha" style="width: 100%">
                  <li>
                    <div class="mainin_jxb">
                      <router-link
                        :to="{ name: 'order_list', params: { activeName: 1 } }"
                      >
                        <h3>待审核订单</h3>
                        <p>
                          <span>{{ list.order_check }}</span>
                        </p>
                      </router-link>
                    </div>
                  </li>
                  <li>
                    <div class="mainin_jxb">
                      <router-link
                        :to="{ name: 'order_list', params: { activeName: 2 } }"
                      >
                        <h3>待发货订单</h3>
                        <p>
                          <span>{{ list.order_send }}</span>
                        </p>
                      </router-link>
                    </div>
                  </li>
                  <li>
                    <div class="mainin_jxb">
                      <router-link
                        :to="{
                          name: 'order_list',
                          params: { activeName: 3 },
                        }"
                      >
                        <h3>待收货订单</h3>
                        <p>
                          <span>{{ list.order_receive }}</span>
                        </p>
                      </router-link>
                    </div>
                  </li>

                  <li>
                    <div class="mainin_jxb">
                      <router-link
                        :to="{ name: 'user_list', params: { status: 3 } }"
                      >
                        <h3>待审核用户</h3>
                        <p>
                          <span>{{ list.member_check }}</span>
                        </p>
                      </router-link>
                    </div>
                  </li>
                  <li>
                    <div class="mainin_jxb">
                      <router-link
                        :to="{
                          name: 'purchasing_purchase',
                          params: { id: 1 },
                        }"
                      >
                        <h3>待采购</h3>
                        <p>
                          <span>{{ list.purchase }}</span>
                        </p>
                      </router-link>
                    </div>
                  </li>
                  <li>
                    <div class="mainin_jxb">
                      <router-link
                        :to="{
                          name: 'warehouse_receipt',
                          params: { status: 1 },
                        }"
                      >
                        <h3>待入库</h3>
                        <p>
                          <span>{{ list.storage }}</span>
                        </p>
                      </router-link>
                    </div>
                  </li>
                  <li>
                    <div class="mainin_jxb">
                      <router-link
                        :to="{
                          name: 'financial_receivables',
                          params: { status: 1 },
                        }"
                      >
                        <h3>在线支付待结算</h3>
                        <p>
                          <span>{{ list.online_account }}</span>
                        </p>
                      </router-link>
                    </div>
                  </li>
                  <li>
                    <div class="mainin_jxb">
                      <router-link
                        :to="{ name: 'financial_cash', params: { status: 1 } }"
                      >
                        <h3>货到付款待结算</h3>
                        <p>
                          <span>{{ list.offline_account }}</span>
                        </p>
                      </router-link>
                    </div>
                  </li>
                  <li>
                    <div class="mainin_jxb">
                      <router-link
                        :to="{
                          name: 'financial_recharge',
                          params: { status: 1 },
                        }"
                      >
                        <h3>采购待结算</h3>
                        <p>
                          <span>{{ list.account }}</span>
                        </p>
                      </router-link>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </li> -->
      <!-- 天气挂件 -->
      <!-- <li v-if="item == 3" :key="index">
            <div class="mainin_ulb">
              <div class="mainin_qxk">
                <div class="boxdq">
                  <div class="mainin_h">
                    <span class="main_title">天气</span>
                  </div>
                </div>
                <div class="mainin_qxk_p industry_article_box">
                  <div class="weather">
                    <weather></weather>
                  </div>
                </div>
              </div>
            </div>
          </li> -->
      <!-- 下单金额曲线 -->
      <!-- <li v-if="item == 4" :key="index"></li> -->
      <!-- 单品 TOP5 -->
      <!-- <li v-if="item == 5" :key="index">
            <div class="mainin_ulb">
              <div class="mainin_xlb">
                <div class="box">
                  <div class="mainin_h">
                    <span class="main_title">单品 TOP5</span>
                  </div>
                  <div class="mainin_qxs_a">
                    <el-select
                      v-model.trim="cycleid2"
                      class="wid80"
                      @change="cycleChange(2, cycleid2)"
                    >
                      <el-option
                        v-for="(item, index) in cycledata"
                        :key="index"
                        :label="item.name"
                        :value="item.id"
                      ></el-option>
                    </el-select>
                  </div>
                </div>
                <div id="chartColumn3" style="width: 100%; height: 340px"></div>
              </div>
            </div>
          </li> -->
      <!-- 各大类占比 -->
      <!-- <li v-if="item == 6" :key="index">
            <div class="mainin_ulb">
              <div class="mainin_xlb">
                <div class="box">
                  <div div class="mainin_h">
                    <span class="main_title">各大类占比</span>
                  </div>
                  <div class="mainin_qxs_a">
                    <el-select
                      v-model.trim="cycleid3"
                      class="wid80"
                      @change="cycleChange(3, cycleid3)"
                    >
                      <el-option
                        v-for="(item, index) in cycledata"
                        :key="index"
                        :label="item.name"
                        :value="item.id"
                      ></el-option>
                    </el-select>
                  </div>
                </div>
                <div id="chartColumn2" style="width: 100%; height: 340px"></div>
              </div>
            </div>
          </li> -->
      <!-- 系统预警 -->
      <!-- <li v-if="item == 7" :key="index">
            <div class="mainin_ulb">
              <div class="mainin_qxk">
                <div class="boxdq">
                  <div class="mainin_h">
                    <span class="main_title">系统预警</span>
                  </div>
                </div>
                <div class="mainin_qxk_p industry_article_box">
                  <div class="warning_container">
                    <div
                      class="warning_item"
                      v-if="
                        warning.sms_notice == 1 &&
                        warning.sms_num < warning.sms_notice_number
                      "
                    >
                      <p>{{ warning.sms_num }}<span>条</span></p>
                      <p>短信余量提醒</p>
                    </div>
                    <div class="warning_item" v-if="warning.bill_count > 0">
                      <p>{{ warning.bill_count }}<span>条</span></p>
                      <p>待支付佣金账单</p>
                    </div>
                    <div
                      @click="handleJump('contract_period')"
                      class="warning_item"
                      v-if="warning.contract_period"
                    >
                      <p>{{ warning.contract_period }}<span>天</span></p>
                      <p>合约期剩余</p>
                    </div>
                    <div class="warning_item" v-if="warning.sms_set != 1">
                      <h3 @click="handleJump('sms')">短信账号未配置</h3>
                    </div>
                    <div class="warning_item" v-if="warning.wx_set != 1">
                      <h3 @click="handleJump('wx')">微信公众号未配置</h3>
                    </div>
                    <div class="warning_item" v-if="warning.union_set != 1">
                      <h3 @click="handleJump('union')">在线支付未配置</h3>
                    </div>
                    <div class="warning_item" v-if="warning.baidu_set != 1">
                      <h3 @click="handleJump('baidu')">百度地图未配置</h3>
                    </div>
                    <div class="warning_item" v-if="warning.site_set != 1">
                      <h3 @click="handleJump('site')">平台信息未配置完整</h3>
                    </div>
                  </div>
                </div>
                <div class="yjfk_no_data" v-if="warning_item_length == 0">
                  <img :src="no_data_img" alt="" />
                </div>
              </div>
            </div>
          </li> -->
      <!-- 意见反馈 -->
      <!-- <li v-if="item == 8" :key="index">
            <div class="mainin_ulb">
              <div class="mainin_qxk">
                <div class="boxdq">
                  <div class="mainin_h">
                    <span class="main_title">意见反馈</span>
                  </div>
                </div>

                <div class="mainin_qxk_p" v-if="list.feedback.length > 0">
                  <ul>
                    <li
                      class="boxdq"
                      v-for="(item, index) in list.feedback"
                      :key="index"
                      @click="feedback(index, item.content)"
                    >
                      <div class="mainin_qxk_pl box">
                        <span
                          v-if="item.unread == 0 ? true : false"
                          class="red_dot"
                        ></span>
                        <img :src="item.avatar ? item.avatar : puzzleImg" />
                        <div class="mainin_qxk_plw">
                          <p class="ellipsis">
                            {{ item.member.nickname }}
                          </p>
                          <span class="ellipsis">{{ item.content }}</span>
                        </div>
                      </div>
                      <div :class="['mainin_qxk_pr']">
                        <p>{{ parseTime(item.created_at, "{y}-{m}-{d}") }}</p>
                        <p><i class="el-icon-arrow-right"></i></p>
                      </div>
                    </li>
                  </ul>
                  <router-link class="advice_more" to="/morefeedback"
                    >更多 ></router-link
                  >
                </div>
                <div class="yjfk_no_data" v-if="list.feedback.length == 0">
                  <img :src="no_data_img" alt="" />
                </div>
              </div>
            </div>
          </li> -->
      <!-- 行业资讯 -->
      <!-- <li v-if="item == 9" :key="index">
            <div class="mainin_ulb">
              <div class="mainin_qxk">
                <div class="boxdq">
                  <div class="mainin_h">
                    <span class="main_title">行业资讯</span>
                  </div>
                </div>
                <div
                  class="mainin_qxk_p industry_article_box"
                  v-if="article.length > 0"
                >
                  <ul>
                    <li v-for="item in article" :key="item.id">
                      <div class="industry_article">
                        <div class="left">
                          <p @click="handleArticle(item.id, 1)">
                            {{ item.title }}
                          </p>
                          <p>
                            {{ item.intro }}
                          </p>
                        </div>
                        <div class="right">
                          {{ parseTime(item.add_time, "{y}-{m}-{d}") }}
                        </div>
                      </div>
                    </li>
                  </ul>
                  <a
                    href="https://www.caidj.net/news/4"
                    target="_blank"
                    class="advice_more"
                  >
                    更多资讯<i class="el-icon-d-arrow-right"></i
                  ></a>
                </div>
                <div class="yjfk_no_data" v-if="article.length == 0">
                  <img :src="no_data_img" alt="" />
                </div>
              </div>
            </div>
          </li> -->
      <!-- 更新记录 -->
      <!-- <li v-if="item == 10" :key="index">
            <div class="mainin_ulb">
              <div class="mainin_qxk">
                <div class="boxdq">
                  <div class="mainin_h">
                    <span class="main_title">更新记录</span>
                  </div>
                </div>
                <div
                  class="mainin_qxk_p industry_article_box"
                  v-if="upgrade.length > 0"
                >
                  <ul>
                    <li v-for="(item, index) in upgrade" :key="index">
                      <div class="upgrade">
                        <div class="left">
                          [{{ parseTime(item.created_at) }}]
                        </div>
                        <div class="right">
                          <p @click="jumpUpdate(item)">
                            {{ item.title }}
                          </p>
                        </div>
                      </div>
                    </li>
                  </ul>
                  <a
                    @click="jumpbigdata(2)"
                    target="_blank"
                    class="advice_more"
                  >
                    更多记录<i class="el-icon-d-arrow-right"></i
                  ></a>
                </div>
                <div class="yjfk_no_data" v-if="upgrade.length == 0">
                  <img :src="no_data_img" alt="" />
                </div>
              </div>
            </div>
          </li> -->
      <!-- 帮助中心 -->
      <!-- <li v-if="item == 11" :key="index">
            <div class="mainin_ulb">
              <div class="mainin_qxk">
                <div class="boxdq">
                  <div class="mainin_h">
                    <span class="main_title">帮助中心</span>
                  </div>
                </div>
                <div class="mainin_qxk_p industry_article_box">
                  <div class="help_center">
                    <div class="image_top">
                      <div class="left">
                        <img
                          @click="handleHelpCenter(1)"
                          src="@/assets/images/index_handlebook.png"
                          alt="使用手册"
                        />
                        <p>使用手册</p>
                      </div>
                      <div class="right">
                        <img
                          @click="handleHelpCenter(2)"
                          src="@/assets/images/index_question.png"
                          alt="常见问题"
                        />
                        <p>常见问题</p>
                      </div>
                    </div>
                    <div class="link_bottom">
                      <p>帮助热线：400-656-9798</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </li> -->
      <!-- 招标信息 -->
      <!-- <li v-if="item == 12" :key="index">
            <div class="mainin_ulb">
              <div class="mainin_qxk">
                <div class="boxdq">
                  <div class="mainin_h">
                    <span class="main_title">招标信息</span>
                  </div>
                </div>
                <div
                  class="mainin_qxk_p industry_article_box"
                  v-if="tender.length > 0"
                >
                  <ul>
                    <li v-for="item in tender" :key="item.id">
                      <div class="industry_article tender_industry_article">
                        <div class="left">
                          <p @click="handleArticle(item, 2)">
                            {{ item.title }}
                          </p>
                        </div>
                        <div class="right tender_right">
                          {{ parseTime(item.created_at, "{y}-{m}-{d}") }}
                        </div>
                      </div>
                    </li>
                  </ul>
                  <router-link class="advice_more" to="/moretender"
                    >更多信息 ></router-link
                  >
                </div>
                <div class="yjfk_no_data" v-if="tender.length == 0">
                  <img :src="no_data_img" alt="" />
                </div>
              </div>
            </div>
          </li> -->
      <!-- </template>
      </ul> -->
    </div>
    <!-- 页面设置 -->
    <div
      :class="[{ on: mainin_xs }, ' mainin_xs']"
      @click.stop="mainin_ex = true"
      @mouseover="mainin_xs = true"
      @mouseleave="mainin_xs = false"
    >
      <i class="el-icon-arrow-up"></i>显示
    </div>

    <div :class="[{ on: mainin_ex }, ' mainin_ex']">
      <div class="mainin_exv">
        <h3>显示</h3>
        <div class="mainin_exa">
          <el-checkbox-group v-model="type">
            <ul>
              <li class="boxdq" v-for="(item, index) in group" :key="index">
                <el-checkbox :label="item.id" :disabled="!item.disabled">{{
                  item.name
                }}</el-checkbox>
                <draggable
                  v-model="item.children"
                  style="width: 100%"
                  :options="{
                    animation: 150,
                    sort: true,
                    forceFallback: true,
                    ghostClass: 'sortable-ghost',
                    fallbackOnBody: true,
                    handle: '.svg-icon',
                  }"
                >
                  <li
                    class="boxd"
                    v-for="(items, indexs) in item.children"
                    :key="indexs"
                  >
                    <el-checkbox :label="items.id" :disabled="items.disabled">{{
                      items.name
                    }}</el-checkbox>
                    <svg-icon icon-class="index_move" />
                  </li>
                </draggable>
              </li>
            </ul>
          </el-checkbox-group>
        </div>
      </div>
      <div class="mainin_exb">
        <el-button type="primary" @click="determine" v-repeatClick
          >确定</el-button
        >
        <el-button @click="recovery" v-repeatClick>恢复</el-button>
        <el-button @click="mainin_ex = false">取消</el-button>
      </div>
    </div>

    <!-- 图片显示查看器 -->
    <el-dialog
      title="意见反馈"
      :visible.sync="showViewer"
      width="600px"
      top="105px"
      style="min-height: 300px"
    >
      <div class="dialog_main">
        <div class="dialog_content">
          <p>
            {{ feedContent }}
          </p>
        </div>
        <div class="dialog_img">
          <el-image
            style="width: 150px; height: 150px"
            v-for="(item, index) in picList"
            :key="index"
            :src="item"
            :preview-src-list="picList"
          >
            >
          </el-image>
        </div>
      </div>
    </el-dialog>

    <div class="help_panels" v-if="wxDialogVisible">
      <div class="top">
        <h3>在线客服</h3>
        <i class="el-icon-close close helper_icon"></i>
      </div>
      <div class="main_container">
        <div id="qrcode"></div>
        <div class="wx_style">使用微信扫一扫联系工程师</div>
      </div>
    </div>

    <div
      class="cust_box"
      @mouseover="sel_wxShow((wxDialogVisible = true))"
      @mouseleave="wxDialogVisible = false"
    >
      <img src="@/assets/images/cust.png" />
    </div>

    <!-- 没有数据图片 -->
    <img v-show="false" ref="img" src="@/assets/images/no_data.png" alt="" />
  </div>
</template>

<script>
import ElImageViewer from "element-ui/packages/image/src/image-viewer";
import { mapGetters, mapMutations } from "vuex";
import echarts from "echarts";
import { EleResize } from "@/utils/esresize.js";
import draggable from "vuedraggable";
import {
  chart,
  unread,
  changeChart,
  setIndex,
  setFeedback,
  getClassFil,
} from "@/api/index/index";
import { sms_info_stock } from "@/api/global/globalSystem";
import { apiUrl, objKeySort, Md5 } from "@/utils/public";
import { puzzleImg, unpaid_order } from "@/api/currency";
import { parseTime } from "@/utils/index";
import { indexHeader } from "@/options/headerSet.js";
import Weather from "./components/weather.vue";
import QRCode from "qrcodejs2";
import EncloCard from "./components/EncloCard.vue";
import EncloRightCard from "./components/EncloRightCard.vue";
import { uploadPath } from "@/api/currency";
import { isvalidPhone } from "@/utils/validate";
let resizeTimer = null;
export default {
  name: "index",
  computed: {
    ...mapGetters([
      "name",
      "avatar",
      "indexSetting",
      "domestic",
      "contract_period",
      "is_expired",
      "companyInfo",
      "document_url",
      "document_status",
      "wx_customer_service",
    ]),
  },
  components: {
    draggable,
    ElImageViewer,
    Weather,
    EncloCard,
    EncloRightCard,
  },
  data() {
    /**
     * 校验手机号
     */
    // const validatePhone = (rule, value, callback) => {
    //   const regExp =
    //     /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/;
    //   let valueList = value.split("");
    //   if (!regExp.test(value)) {
    //     callback(new Error("请输入正确的手机号"));
    //   } else {
    //     callback();
    //   }
    // };
    const validPhone = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入电话号码"));
      } else if (!isvalidPhone(value)) {
        //判断用户输入的值是否符合规则
        callback(new Error("请输入正确的11位手机号码"));
      } else {
        callback();
      }
    };
    return {
      myChart: null,
      parseTime,
      indexHeader,
      indexHeader_recovery: JSON.parse(JSON.stringify(indexHeader)),
      main_loading: false,
      // 帮助文档
      helper_show: false,

      no_data_img: require("@/assets/images/no_data.png"),
      no_data_options: {
        graphic: [
          {
            type: "image",
            id: "logo",
            left: "center",
            top: "50",
            bounding: "raw",
            style: {
              image: require("@/assets/images/no_data.png"),
              width: 92,
              opacity: 1,
            },
          },
        ],
      },
      // 图片显示查看器
      showViewer: false,
      feedContent: "", //反馈详情
      picList: [],
      // 筛选
      cycledata: [
        {
          id: 1,
          name: "一周",
        },
        {
          id: 2,
          name: "半个月",
        },
        {
          id: 3,
          name: "一个月",
        },
      ],
      cycleid1: 1,
      cycleid2: 1,
      cycleid3: 1,
      // 列表数据
      list: {
        feedback: [],
      },
      puzzleImg,

      // 更新记录
      notice: [
        {
          name: "测试",
          time: "2020-04-02",
        },
      ],
      // 行业资讯
      article: [],
      article_url: "",
      // 招标信息
      tender: [],
      // 更新记录
      upgrade: [],
      // 预警信息
      warning: {
        union_set: 0,
        sms_set: 0,
        wx_set: 0,
        baidu_set: 0,
        site_set: 0,
        sms_num: 0,
        sms_notice: 0,
        sms_notice_number: 80,
        bill_count: 0,
        contract_period: null,
        contract_period_url: null,
      },
      warning_item_length: 0,
      // 页面设置
      mainin_xs: false,
      mainin_ex: false,
      // 板块勾选
      type: [1, 2, 3, 4, 5, 6],

      // 板块内容
      group: [],
      // 显示板块
      main_index: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
      wxDialogVisible: false,
      boxright: 90,

      // 卡片列表
      cardList: [
        {
          id: 1,
          name: "今日简报",
          rightIcon: {
            iconName: "数据大屏",
            iconSrc: require("../../assets/images/big_data.png"),
            iconWidth: 16,
            iconHeight: 14,
          },
          cardBox: [
            {
              iconName: "新增订单",
              iconSrc: "jindusvg",
              iconWidth: 15,
              iconHeight: 17,
              iconValue: "order_increased",
            },
            {
              iconName: "同比增长",
              iconSrc: "jindusvg",
              iconWidth: 18,
              iconHeight: 18,
              iconValue: "order_increased_money",
            },
            {
              iconName: "商户黑名单",
              iconSrc: "dingdan_dingdanliebiao",
              iconWidth: 18,
              iconHeight: 16,
              iconValue: "member_check",
            },
            {
              iconName: "用户下单率",
              iconSrc: "jindusvg",
              iconWidth: 15,
              iconHeight: 17,
              iconValue: "order_rate",
            },
            {
              iconName: "配送订单",
              iconSrc: "dingdan_dingdanliebiao",
              iconWidth: 18,
              iconHeight: 18,
              iconValue: "order_send",
            },
            {
              iconName: "供应商黑名单",
              iconSrc: "dingdan_dingdanliebiao",
              iconWidth: 15,
              iconHeight: 17,
              iconValue: "company_check",
            },
            {
              iconName: "溯源预警",
              iconSrc: "dingdan_dingdanliebiao",
              iconWidth: 18,
              iconHeight: 18,
              iconValue: "trace_count",
            },
            {
              iconName: "检测次数",
              iconSrc: "dingdan_dingdanliebiao",
              iconWidth: 18,
              iconHeight: 18,
              iconValue: "day_all_warning_count",
            },
            {
              iconName: null,
              iconSrc: null,
              iconWidth: null,
              iconHeight: null,
              iconNum: null,
              content: true,
            },
            
            // {
            //   iconName: "采购进度",
            //   iconSrc: "jindusvg",
            //   iconWidth: 18,
            //   iconHeight: 16,
            //   iconValue: "purchase_percent",
            // },
            // {
            //   iconName: "订单分拣进度",
            //   iconSrc: "jindusvg",
            //   iconWidth: 18,
            //   iconHeight: 16,
            //   iconValue: "sort_rate",
            //   formatter: true,
            // },
            // {
            //   iconName: "发货进度",
            //   iconSrc: "jindusvg",
            //   iconWidth: 18,
            //   iconHeight: 16,
            //   iconValue: "send_rate",
            //   formatter: true,
            // },
          ],
        },
        {
          id: 2,
          name: "待处理",
          rightIcon: {
            iconName: "系统流程",
            iconSrc: require("../../assets/images/process.svg"),
            iconWidth: 19,
            iconHeight: 19,
          },
          cardBox: [
            {
              iconName: "药残预警",
              iconSrc: require("../../assets/homePage/daishenhedingdan.png"),
              iconWidth: 47,
              iconHeight: 47,
              iconValue: "warning_count",
              router: "order_list",
              params: { activeName: 1 },
            },
            {
              iconName: "待审核商户",
              iconSrc: require("../../assets/homePage/daifahuo.png"),
              iconWidth: 47,
              iconHeight: 47,
              iconValue: "member_audit",
              router: "order_list",
              params: { activeName: 2 },
            },
            {
              iconName: "待审核供应链",
              iconSrc: require("../../assets/homePage/peisong.png"),
              iconWidth: 47,
              iconHeight: 47,
              iconValue: "supplier_audit",
              router: "order_list",
              params: { activeName: 3 },
            },
            {
              iconName: "溯源异常",
              iconSrc: require("../../assets/homePage/yonghu.png"),
              iconWidth: 47,
              iconHeight: 47,
              iconValue: "trace_count",
              router: "user_list",
              params: { status: 3 },
            },
            {
              iconName: "档口反馈",
              iconSrc: require("../../assets/homePage/caigou.png"),
              iconWidth: 47,
              iconHeight: 47,
              iconValue: "purchase",
              router: "purchasing_purchase",
              params: { id: 1 },
            },
            {
              iconName: "家长投诉",
              iconSrc: require("../../assets/homePage/ruku.png"),
              iconWidth: 47,
              iconHeight: 47,
              iconValue: "storage",
              router: "warehouse_receipt",
              params: { status: 1 },
            },
            {
              iconName: "学生意见",
              iconSrc: require("../../assets/homePage/zaixianzhifu.png"),
              iconWidth: 47,
              iconHeight: 47,
              iconValue: "online_account",
              router: "financial_receivables",
              params: { status: 1 },
            },
            {
              iconName: "供应链意见",
              iconSrc: require("../../assets/homePage/huodaofukuan.png"),
              iconWidth: 47,
              iconHeight: 47,
              iconValue: "offline_account",
              router: "financial_cash",
              params: { status: 1 },
            },
            // {
            //   iconName: "采购待结算",
            //   iconSrc: require("../../assets/homePage/caigoujiesuan.png"),
            //   iconWidth: 47,
            //   iconHeight: 47,
            //   iconValue: "account",
            //   router: "financial_recharge",
            //   params: { status: 1 },
            // },
          ],
        },
        {
          id: 3,
          name: "预警信息",
          rightIcon: null,
          cardBox: [
            {
              iconName: "异常订单",
              iconNum: "0",
            },
            {
              iconName: "短信余量",
              iconNum: "0",
            },
            {
              iconName: "协议价到期",
              iconNum: "0",
            },
            {
              iconName: "保质期预警",
              iconNum: "0",
            },
            {
              iconName: "保质期到期",
              iconNum: "0",
            },
            {
              iconName: "库存预警",
              iconNum: "0",
            },
            {
              iconName: "服务天数",
              iconNum: "0",
            },
          ],
        },
        {
          id: 4,
          name: "下单金额曲线",
          select: true,
        },
        {
          id: 5,
          name: "各大类占比",
          select: true,
        },
        {
          id: 6,
          name: "单品 TOP5",
          select: true,
        },
      ],
      cardList2: [
        {
          id: 7,
          name: "天气",
        },
        {
          id: 8,
          rightIcon: {
            iconName: "更多",
            iconSrc: require("../../assets/images/big_data.png"),
            iconWidth: 16,
            iconHeight: 14,
          },
          name: "行业资讯",
          cardBox: [
            // {
            //   iconName:
            //     "相约北大：乡村商学堂助力菜东家创始人冯毅相约北大：乡村商学堂助力菜东家创始人冯毅......",
            //   iconTime: "2023-07-13",
            //   tip: "2023年7月6日，菜东家创始人冯毅作为全国各地57位...",
            // },
          ],
        },
        {
          id: 9,
          rightIcon: {
            iconName: "更多",
            iconSrc: require("../../assets/images/big_data.png"),
            iconWidth: 16,
            iconHeight: 14,
          },
          name: "招标信息",
          cardBox: [
            // {
            //   iconName:
            //     "相约北大：乡村商学堂助力菜东家创始人冯毅相约北大：乡村商学堂助力菜东家创始人冯毅......",
            //   iconTime: "2023-07-13",
            // },
          ],
        },
        {
          id: 10,
          rightIcon: null,
          name: "意见反馈",
          cardBox: [],
        },
        {
          id: 11,
          rightIcon: null,
          name: "帮助中心",
          // cardBox: [
          //   {
          //     iconName: "使用手册  >",
          //     iconSrc: require("../../assets/homePage/shiyongshouce_1.png"),
          //     iconWidth: 18,
          //     iconHeight: 20,
          //     iconTime: "2023-08-04",
          //   },
          //   {
          //     iconName: "常见问题  >",
          //     iconSrc: require("../../assets/homePage/changjianwenti.png"),
          //     iconWidth: 21,
          //     iconHeight: 21,
          //     iconTime: "2023-08-04",
          //   },
          // ],
        },
        {
          id: 12,
          rightIcon: {
            iconName: "更多",
            iconSrc: require("../../assets/images/big_data.png"),
            iconWidth: 16,
            iconHeight: 14,
          },
          name: "更新记录",
          cardBox: [
            // {
            //   iconName: "一些优化与修复",
            //   iconTime: "2023-08-30 13:31:15",
            // },
          ],
        },
      ],
      // 真实展示卡片数据
      leftCardList: [],
      rightCardList: [],
      uploadPath,
      yijianForm: {
        content: null,
        phone: null,
        type: null,
        img_url: null,
        img_urls: [],
      },
      yijianRules: {
        phone: [{ required: true, trigger: "blur", validator: validPhone }],
      },
      fileList: [],
      classFil: [],
    };
  },
  watch: {
    domestic: {
      handler(val) {
        // let message = `您当前合约期还剩${this.contract_period}天即将到期 请及时续费！`;
        let message = "您的佣金账单还尚未支付，请及时支付";
        if (val.status == "notice") {
          this.$notify({
            title: "系统提示",
            type: "warning",
            position: "bottom-right",
            message: message,
            duration: 0,
          });
        }
      },
      deep: true,
      immediate: true,
    },
    is_expired: {
      handler(val) {
        let message = `您当前合约期还剩${this.contract_period}天即将到期 请及时续费！<a style='color:red' href='/service#/order'>点击去续费>>></a>`;
        if (val) {
          this.$notify({
            title: "系统提示",
            type: "warning",
            dangerouslyUseHTMLString: true,
            position: "bottom-right",
            message: message,
            offset: 80,
            duration: 0,
          });
        }
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    ...mapMutations({
      SET_INDEX_SETTING: "user/SET_INDEX_SETTING",
    }),
    getClassFil() {
      let query = Object.assign(
        apiUrl().name
      );
      // getClassFil(query).then((res) => {
      //   if (res.errcode == 0) {
      //     this.classFil = res.data;
      //   } else {
      //     this.$message.error(res.errmsg);
      //   }
      // });
    },
    unpaid_order() {
      let data = Object.assign(
        apiUrl().name
      );
      unpaid_order(data).then((res) => {
        console.log(res);
      });
    },
    // 帮助文档
    handleHelp() {
      this.helper_show = !this.helper_show;
    },
    // start(event) {
    //   console.log("start", event);
    // },
    // end(event) {
    //   console.log("end", event, this.group);
    // },
    // move(event, orgin) {
    //   console.log("move", event, orgin);
    // },
    //微信客服链接
    sel_wxShow() {
      if (document.querySelector("#qrcode")) {
        document.querySelector("#qrcode").innerHTML = "";
      }
      this.$nextTick(() => {
        let qrcode = new QRCode("qrcode", {
          width: 150,
          height: 150,
          text: this.wx_customer_service,
        });
      });
    },
    // 页面设置
    setIndex(setting, sort) {
      let data = Object.assign(
        apiUrl().name,
        { setting: setting, sort: sort }
      );
      let company_id = this.indexSetting.company_id;
      let form = {
        company_id: company_id,
        setting: setting,
        sort: sort,
      };
      setIndex(data).then((res) => {
        if (res.errcode == 0) {
          this.SET_INDEX_SETTING(form);
        } else {
          this.$message.error("失败");
        }
      });
    },
    // 页面设置确定
    determine() {
      // 定义左侧卡片的展示隐藏和布局
      let newLeftCardList = [];
      // 定义右侧卡片的展示隐藏
      let newRightCardList = [];
      // 先判断group中的数据顺序
      let groupSort = [];
      this.group.forEach((i) => {
        i.children.forEach((item) => {
          groupSort.push(item.id);
        });
      });
      // 在判断type中是否展示
      let type = [];
      groupSort.forEach((item1) => {
        this.type.forEach((item) => {
          if (item == item1) {
            type.push(item1);
          }
        });
      });
      type.forEach((m) => {
        this.cardList.forEach((item) => {
          if (item.id == m) {
            newLeftCardList.push(item);
          }
        });
        this.cardList2.forEach((item) => {
          if (item.id == m) {
            newRightCardList.push(item);
          }
        });
      });
      // 定义右侧卡片的展示隐藏
      this.leftCardList = newLeftCardList;
      this.rightCardList = newRightCardList;
      // ! 将当前展示的卡片数据id传给后端进行保存
      // 创建当前排序的字段
      let leftSort = this.leftCardList.map((item) => item.id).join(",");
      let rightSort = this.rightCardList.map((item) => item.id).join(",");
      let sort = leftSort + "/" + rightSort;
      // 创建当前展示的卡片字段
      let setting = leftSort + "," + rightSort;
      this.setIndex(setting, sort);

      for (var i = 1; i < 4; i++) {
        if (document.getElementById("chartColumn" + i)) {
          document
            .getElementById("chartColumn" + i)
            .removeAttribute("_echarts_instance_");
          document.getElementById("chartColumn" + i).innerHTML = "";
        }
      }
      setTimeout(() => {
        this.chartColumn();
      });
      this.mainin_ex = false;
    },

    // 页面设置恢复
    recovery() {
      for (var i = 1; i < 4; i++) {
        if (document.getElementById("chartColumn" + i)) {
          document
            .getElementById("chartColumn" + i)
            .removeAttribute("_echarts_instance_");
          document.getElementById("chartColumn" + i).innerHTML = "";
        }
      }
      this.group = this.indexHeader_recovery;
      this.type = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
      let setting = "1,2,3,4,5,6,7,8,9,10,11,12";
      let sort = "1,2,3,4,5,6/7,8,9,10,11,12";
      this.setIndex(setting, sort);
      setTimeout(() => {
        this.$router.go(0);
        this.chartColumn();
      });
      this.mainin_ex = false;
    },
    // 只适用图表方法
    drawLine(dom, option) {
      if (document.getElementById(dom)) {
        // 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(document.getElementById(dom));
        this.myChart = myChart;
        let resizeDiv = document.getElementById(dom);

        // 清空画布
        myChart.clear();

        // 绘制图表
        myChart.setOption(option);

        let listener = function () {
          myChart.resize();
        };
        EleResize.on(resizeDiv, listener);
      }
    },
    // 图表
    chartColumn(id) {
      // 折线图
      let dom1 = "chartColumn1";
      let option1 = {
        tooltip: {
          show: true,
          trigger: "axis",
          formatter: "{a} <br/>{b} : {c}",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#03A98E",
            },
          },
        },
        grid: {
          top: 20,
          bottom: 20,
          left: 60,
          right: 40,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          axisLabel: {
            show: true,
            textStyle: {
              color: "#333",
            },
          },
          axisTick: {
            show: false,
          },
          data:
            this.list.sales.length != 0
              ? Object.entries(this.list.sales).map((e) => e[0])
              : [],
        },
        yAxis: {
          axisLine: {
            lineStyle: {
              color: "rgba(107,107,107,0.37)",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#ccc",
              type: "dashed",
            },
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#333",
            },
          },
          axisTick: {
            show: false,
          },
          type: "value",
        },
        series: [
          {
            name: "下单金额",
            data:
              this.list.sales.length != 0
                ? Object.entries(this.list.sales).map((e) => e[1])
                : [],
            symbol: "circle",
            symbolSize: 10,
            smooth: true, //这句就是让曲线变平滑的
            type: "line",
            lineStyle: {
              normal: {
                color: "#03A98E",
              },
            },
            itemStyle: {
              normal: {
                borderWidth: 3,
                borderColor: "#BAFFF4",
                color: "#03A98E",
                areaStyle: {
                  color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                    {
                      offset: 0,
                      color: "rgba(3,169,142,0)",
                    },
                    {
                      offset: 1,
                      color: "rgba(3,169,142,0.25)",
                    },
                  ]),
                },
              },
            },
          },
        ],
      };
      // 柱状图
      let dom2 = "chartColumn3";
      let option2 = {
        tooltip: {
          show: true,
          trigger: "axis",
          formatter: "{a} <br/>{b} : {c}",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#03A98E",
            },
          },
        },
        grid: {
          top: 20,
          bottom: 40,
          left: 60,
          right: 40,
        },
        xAxis: {
          type: "category",
          splitLine: {
            show: false,
            lineStyle: {
              color: "#eaeaea",
            },
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#333",
            },
          },
          axisTick: {
            show: false,
          },
          data:
            this.list.single.length != 0
              ? this.list.single.map((e) => e.name)
              : [],
        },
        yAxis: {
          splitLine: {
            show: true,
            lineStyle: {
              color: "#ccc",
              type: "dashed",
            },
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#333",
            },
          },
          axisLine: {
            lineStyle: {
              color: "rgba(107,107,107,0.37)",
            },
          },
          axisTick: {
            show: false,
          },
          type: "value",
        },
        series: [
          {
            name: "下单金额",
            data:
              this.list.single.length != 0
                ? this.list.single.map((e) => e.order_money)
                : [],
            type: "bar",
            barWidth: 20,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "#6DF0DA",
                    },
                    {
                      offset: 1,
                      color: "#05AA8F",
                    },
                  ],
                  false
                ),
              },
            },
          },
        ],
      };
      // 饼图
      let dom3 = "chartColumn2";
      var rich = {
        name: {
          color: "#333",
          fontSize: 14,
          padding: [0, 5],
          fontWeight: "400",
          align: "right",
        },
        percent: {
          color: "#fff",
          align: "right",
          fontSize: 14,
          fontWeight: "500",
          padding: [0, 5],
        },
        hr: {
          borderColor: "#333",
          width: "100%",
          borderWidth: 1,
          height: 0,
        },
      };
      let option3 = {
        backgroundColor: "#fff",
        tooltip: {
          // 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
          trigger: "item",
        },
        grid: {
          // grid 组件离容器上侧的距离。
          top: 0,
        },
        legend: {
          orient: "vertical",
          top: "20%",
          right: "10%",
          icon: "circle", //这个字段控制形状
          itemGap: 10, //设置间距
          textStyle: {
            //图例文字的样式
            color: "#424F65",
            fontSize: 14,
            fontWeight: 500,
            rich: {
              //这里面的 a、b 是在formatter中定义的
              a: {
                width: 50,
                fontSize: 12,
                fontWeight: 500,
                color: "#303030",
              },
            },
          },
        },
        color: [
          "#03a98e",
          "#35baa5",
          "#4ec3b0",
          "#68cbbb",
          "#81d4c6",
          "#9addd2",
          "#b3e5dd",
        ],
        series: [
          {
            // 系列名称
            name: "各大类占比",
            type: "pie",
            // 饼图的半径。可以为如下类型
            radius: ["40%", "60%"],
            center: ["30%", "50%"],
            // 图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。
            silent: false,
            // 饼图的扇区是否是顺时针排布。
            clockwise: true,
            backgroundColor: "transparent",
            label: {
              normal: {
                formatter: (params) => {
                  return "{name|" + params.name + "}";
                },
                rich: rich,
              },
            },
            data: this.list.category,
          },
          {
            type: "pie",
            radius: [0, 120],
            center: ["30%", "50%"],
            hoverAnimation: false, //鼠标经过的动画
            animation: false,
            selectedMode: false,
            // backgroundColor:'#e5f5ec',
            silent: true,
            tooltip: {
              show: false,
            },
            itemStyle: {
              normal: {
                label: { show: false },
                labelLine: { show: false },
                color: "transparent",
              },
            },
            data: [
              {
                value: 100,
                z: 99,
                label: {
                  show: true,
                  position: "center",
                  formatter: () => {
                    return `{bg|}`;
                  },
                  rich: {
                    bg: {
                      backgroundColor: {
                        image: require("./gouwuche.png"),
                      },
                      height: 120,
                    },
                  },
                },
              },
            ],
          },
        ],
      };

      let newarr = [];
      for (const key in this.list.sales) {
        if (this.list.sales[key] != 0) {
          newarr.push(this.list.sales[key]);
        }
      }
      if (newarr.length == 0) {
        option1 = this.no_data_options;
      }
      if (this.list.single.length == 0) {
        option2 = this.no_data_options;
      }
      if (this.list.category.length == 0) {
        option3 = this.no_data_options;
      }
      if (id) {
        if (id == 1) {
          this.drawLine(dom1, option1);
        }
        if (id == 2) {
          this.drawLine(dom2, option2);
        }
        if (id == 3) {
          this.drawLine(dom3, option3);
        }
      } else {
        this.drawLine(dom1, option1);
        this.drawLine(dom2, option2);
        this.drawLine(dom3, option3);
      }
    },

    // 选择日期
    cycleChange(type, id) {
      let data = Object.assign(
        apiUrl().name,
        { type: type, id: id }
      );
      changeChart(data).then((res) => {
        if (res.errcode == 0) {
          if (type == 1) {
            this.list.sales = res.data;
          }
          if (type == 2) {
            this.list.single = res.data;
          }
          if (type == 3) {
            this.list.category = res.data;
          }
          // 图表
          this.chartColumn(type);
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    // 意见反馈查看
    feedback(index, content) {
      this.picList = [];
      this.picList = this.list.feedback[index].img.map((e) => e.img);

      let id = this.list.feedback[index].id;
      this.feedContent = content;
      this.$nextTick(() => {
        this.showViewer = true;
        this.unread(id).then(() => {
          this.list.feedback[index].unread = 1;
        });
      });
    },
    // 查看更改状态
    unread(id) {
      let data = Object.assign(
        apiUrl().name,
        { id: id }
      );
      return new Promise((resolv, reject) => {
        unread(data).then((res) => {
          if (res.errcode == 0) {
            resolv();
          }
        });
      });
    },
    chart() {
      this.main_loading = true;
      let data = Object.assign(
        apiUrl().name
      );
      chart(data).then((res) => {
        this.main_loading = false;
        if (res.errcode == 0) {
          res.data.feedback.map((e) => {
            if (e.img) {
              e.img.map((p) => {
                p.img = this.avatar.domain + p.img;
              });
            }
            e.avatar = "";
            if (e.member.avatar) {
              e.avatar = this.avatar.domain + "/" + e.member.avatar;
            } else {
              e.avatar = e.member.wx_avatar;
            }
          });
          this.article = res.data.article;
          this.article_url = res.data.article_url;
          this.tender = res.data.tender;
          this.upgrade = res.data.upgrade;
          this.warning.union_set = res.data.union_set;
          this.warning.sms_set = res.data.sms_set;
          this.warning.wx_set = res.data.wx_set;
          this.warning.baidu_set = res.data.baidu_set;
          this.warning.site_set = res.data.site_set;
          this.warning.sms_notice = res.data.sms_notice;
          this.warning.sms_notice_number = res.data.sms_notice_number;
          this.warning.bill_count = res.data.bill_count;
          this.warning.contract_period = res.data.contract_period;
          this.warning.contract_period_url = res.data.contract_period_url;
          this.list = res.data;
          // 图表
          this.chartColumn();
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    // 短息余量
    sms_info_stock() {
      let data = Object.assign(
        apiUrl().name
      );
      sms_info_stock(data).then((res) => {
        if (res.errcode == 0) {
          this.warning.sms_num = res.data.balance;
        }
      });
    },
    closeViewer() {
      this.showViewer = false;
    },
    // 行业资讯跳转 && 招标信息
    handleArticle(params, type) {
      switch (type) {
        case 1:
          let url = this.article_url + params;
          window.open(url);
          break;
        case 2:
          url = params.url;
          window.open(url);
          break;

        default:
          break;
      }
    },
    // 帮助中心跳转
    handleHelpCenter(type) {
      let url = "";
      // let modeList = {
      //   1: "批发",
      //   2: "城配",
      //   3: "软件",
      // };
      // let form = {
      //   type: this.companyInfo.model,
      //   product_type: 2,
      //   document_type: 1,
      //   name: modeList[this.companyInfo.model],
      // };
      // let str = "";

      // switch (type) {
      //   case 1:
      //     form.document_type = 1;
      //     for (const key in form) {
      //       str += `${key}=${form[key]}&`;
      //     }
      //     // url = `http://192.168.6.73:9529/#/index/detail/?${str}`;
      //     // url = "http://help.caidj.net.cn/#/index/detail/?${str}";
      //     url = "https://caidj.yuque.com/mrgcuc/gp8c7u";
      //     break;
      //   case 2:
      //     form.document_type = 2;
      //     for (const key in form) {
      //       str += `${key}=${form[key]}&`;
      //     }
      //     // url = `http://192.168.6.73:9529/#/index/detail/?${str}`;
      //     url = "http://help.caidj.net.cn/#/index/detail/?${str}";

      //     break;
      // }
      url = "https://caidj.yuque.com/mrgcuc/gp8c7u";
      window.open(url);
    },
    godocument_url() {
      window.open(this.document_url);
    },
    // 预警跳转
    handleJump(type) {
      let obj = {
        sms: "2",
        wx: "3",
        union: "0",
        baidu: "1",
      };
      let url1 = "global_system_config";
      let url2 = "global_Third";
      if (type == "site") {
        this.$router.push({
          name: url1,
        });
      } else if (type == "contract_period") {
        let url = this.warning.contract_period_url;
        url ? window.open(url) : "";
      } else {
        this.$router.push({
          name: url2,
          params: {
            type: obj[type],
          },
        });
      }
    },
    // 数据大屏 & 帮助文档
    jumpbigdata(type) {
      let modeList = {
        1: "批发",
        2: "城配",
        3: "软件",
      };
      switch (type) {
        case 1:
          this.$router.push({
            path: "/newBigData",
          });
          break;

        case 2:
          //  href="http://help.caidj.net.cn/"
          let form = {
            type: this.companyInfo.model,
            product_type: 2,
            document_type: 3,
            name: modeList[this.companyInfo.model],
          };
          let str = "";
          for (const key in form) {
            str += `${key}=${form[key]}&`;
          }
          str = str.substring(0, str.lastIndexOf("&"));
          let url = `http://help.caidj.net.cn/#/index/detail/?${str}`;
          // let url = `http://192.168.6.73:9529/#/index/detail/?${str}`;
          window.open(url);
          break;
        case 3:
          this.$router.push({
            path: "/process",
          });
          break;
      }
    },
    // 更新记录跳转
    jumpUpdate(item) {
      // let modeList = {
      //   1: "批发",
      //   2: "城配",
      //   3: "软件",
      // };
      // let form = {
      //   type: item.type,
      //   product_type: item.product_type,
      //   document_type: item.document_type,
      //   id: item.id,
      //   name: modeList[this.companyInfo.model],
      // };
      // let str = "";
      // for (const key in form) {
      //   str += `${key}=${form[key]}&`;
      // }
      // str = str.substring(0, str.lastIndexOf("&"));
      // let url = `http://help.caidj.net.cn/#/index/detail?${str}`;
      let url = item.link;
      window.open(url);
    },

    navTo(item) {
      this.$router.push({
        name: item.router,
        params: item.params,
      });
    },
    navToMore(item) {
      // 意见反馈
      if (item.name == "意见反馈") {
        this.$router.push({
          name: "morefeedback",
        });
      } else if (item.name == "行业资讯") {
        window.open("https://www.caidj.net/news/4");
      } else if (item.name == "招标信息") {
        this.$router.push({
          name: "moretender",
        });
      } else if (item.name == "更新记录") {
        //  href="http://help.caidj.net.cn/"
        let modeList = {
          1: "批发",
          2: "城配",
          3: "软件",
        };
        let form = {
          type: this.companyInfo.model,
          // 原本product_type： 2
          product_type: 10,
          document_type: 3,
          name: modeList[this.companyInfo.model],
        };
        let str = "";
        for (const key in form) {
          str += `${key}=${form[key]}&`;
        }
        str = str.substring(0, str.lastIndexOf("&"));
        // let url = `http://help.caidj.net.cn/#/index/detail/?${str}`;
        let url = "https://caidj.yuque.com/mrgcuc/ggqfv3";
        window.open(url);
      }
    },
    changeEcharts(item) {
      let type = null;
      let id = item.cycleid;
      if (item.name == "下单金额曲线") type = 1;
      else if (item.name == "各大类占比") type = 3;
      else if (item.name == "单品 TOP5") type = 2;
      let data = Object.assign(
        apiUrl().name,
        { type: type, id: id }
      );
      changeChart(data).then((res) => {
        if (res.errcode == 0) {
          if (type == 1) {
            this.list.sales = res.data;
          }
          if (type == 2) {
            this.list.single = res.data;
          }
          if (type == 3) {
            this.list.category = res.data;
          }
          // 图表
          this.chartColumn(type);
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    opendown(item) {
      if (item.name == "今日简报") {
        this.$router.push({
          path: "/newBigData",
        });
      } else if (item.name == "待处理") {
        this.$router.push({
          path: "/process",
        });
      }
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file, "点击文件列表中已上传的文件时的钩子");
    },
    changeSuccess(file) {
      if (file.code == 0) {
        this.yijianForm.img_urls.push(file.data.src);
        this.$message.success(file.msg);
      }
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    beforeRemove(file, fileList) {
      let index = this.yijianForm.img_urls.findIndex(
        (item) => item.name == file.name
      );
      this.yijianForm.img_urls.splice(index, 1);
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    onSubmit() {
      let list = ["content", "phone", "type", "img_urls"];
      let phoneList = [];
      if (this.yijianForm.phone) {
        phoneList = this.yijianForm.phone.split("");
      }
      try {
        list.forEach((item) => {
          if (!this.yijianForm[item] && (item == "content" || item == "type")) {
            throw new Error("请将信息补充完整!");
          } else if (
            (!this.yijianForm[item] && item == "phone") ||
            phoneList.length != 11
          ) {
            throw new Error("手机号不正确!");
          } else if (this.yijianForm[item].length == 0 && item == "img_urls") {
            throw new Error("请上传图片!");
          }
        });
      } catch (e) {
        this.$message.error(e);
        return;
      }
      let img_urls = this.yijianForm.img_urls.join(",");
      let data = {
        phone: this.yijianForm.phone,
        content: this.yijianForm.content,
        type: this.yijianForm.type,
        img_url: img_urls,
        action: "add",
      };
      let query = Object.assign(
        apiUrl().name,
        data
      );
      // setFeedback(query).then((res) => {
      //   if (res.errcode == 0) {
      //     this.$message.success(res.errmsg);
      //     this.clearForm();
      //   } else {
      //     this.$message.error(res.errmsg);
      //   }
      // });
    },
    clearForm() {
      this.$set(this.yijianForm, "content", null);
      this.$set(this.yijianForm, "phone", null);
      this.$set(this.yijianForm, "type", null);
      this.$set(this.yijianForm, "img_url", null);
      this.$set(this.yijianForm, "img_urls", []);
      this.fileList = [];
    },

    // 根据接口获取到的数据判断页面卡片展示的内容
    showCardList() {
      // let indexSetting = this.indexSetting.setting;
      let indexSetting = "1,2,3,4,5,6,7,8,9,10,11,12";
      if (indexSetting) {
        let arr = indexSetting.split(",");
        this.main_index = arr;
        this.type = arr.map(Number);
        // 将group中的顺序根据接口返回的格式回显
        let group = [];
        console.log(this.indexHeader);
        this.indexHeader.forEach((item, index) => {
          let data = {
            children: [],
            name: item.name,
            id: item.id,
          };
          group.push(data);
          // arr.forEach((item2) => {
          item.children.forEach((item1) => {
            // if (item1.id == item2) {
            group[index].children.push(item1);
            // }
          });
          // });
        });
        this.group = group;
      }
      this.leftCardList = [];
      this.rightCardList = [];
      this.type.forEach((m) => {
        this.cardList.forEach((item) => {
          if (item.id == m) {
            this.leftCardList.push(item);
          }
        });
        this.cardList2.forEach((item) => {
          if (item.id == m) {
            this.rightCardList.push(item);
          }
        });
      });
    },
  },
  mounted() {
    // 根据接口获取到的数据判断页面卡片展示的内容
    this.showCardList();
    // 图表
    this.chart();
    // 短息
    // this.sms_info_stock();
    //为了防止火狐浏览器拖拽的时候以新标签打开，此代码真实有效
    document.body.ondrop = function (event) {
      event.preventDefault();
      event.stopPropagation();
    };
    let ids = {
      first_id: 0,
      second_id: 0,
      title: "帮助文档",
    };
    ids = JSON.stringify(ids);
    localStorage.setItem("cc", ids);

    const node = document.getElementsByClassName("message-wrapper")[0];
    if (node) {
      this.boxright = node.offsetLeft - 30;

      window.addEventListener("resize", () => {
        clearTimeout(resizeTimer);
        resizeTimer = null;
        resizeTimer = setTimeout(() => {
          this.boxright = node.offsetLeft - 30;
        }, 300);
      });
    }
  },
  beforeDestroy() {
    clearTimeout(resizeTimer);
    resizeTimer = null;
  },
  created() {
    this.getClassFil();
  },
  updated() {
    let warning_container = document.querySelector(".warning_container");

    if (warning_container) {
      let warning_item = warning_container.querySelectorAll(".warning_item");
      this.warning_item_length = warning_item.length;
    }
  },
};
</script>

<style lang="scss" scoped>
@import "@/styles/variables.scss";

.dashboard-container {
  .mainin_ul {
    margin-top: 15px;

    & > ul {
      margin-left: -5px;
      margin-right: -5px;

      & > li {
        width: 33.33%;
        height: 420px;
        overflow: hidden;
        margin-bottom: 15px;

        .mainin_ulb {
          margin-left: 5px;
          margin-right: 5px;
          padding-left: 10px;
          padding-right: 10px;
          padding-top: 20px;
          background: $white;
          height: 100%;
        }

        .mainin_h {
          font-size: 14px;
          color: #181818;
          font-weight: bold;

          .main_title {
            &::before {
              content: "";
              display: inline-block;
              width: 5px;
              height: 15px;
              background-color: #19b098;
              vertical-align: top;
              margin-right: 8px;
            }
          }

          .bigdata {
            cursor: pointer;
            float: right;
            padding-right: 8px;
          }
        }

        .mainin_qxs_a {
          margin-left: 10px;
          margin-top: -8px;

          /deep/.el-input__inner {
            border: 0;
            font-size: $font_12;
            padding-right: 10px;
          }

          /deep/.el-select__caret {
            color: $colour_18;
            line-height: 31px;
          }
        }

        .mainin_hy {
          .mainin_hya {
            font-size: $font_14;
            color: $menuActiveText;
          }

          ul {
            margin-top: 20px;

            li {
              height: 24px;
              line-height: 24px;
              margin-top: 10px;

              a {
                font-size: $font_14;
                color: $colour_18;

                span {
                  margin-right: 10px;
                }

                &:hover {
                  color: $menuActiveText;
                }
              }
            }
          }
        }

        .mainin_jb {
          ul {
            margin-left: -10px;
            margin-top: 10px;

            li {
              width: 33.33%;
              margin-top: 7px;

              .mainin_jbm {
                padding-top: 15px;
                margin-left: 10px;
                margin-right: 10px;
                padding-left: 30px;
                padding-right: 15px;
                padding-bottom: 2px;
                min-height: 78px;
                background-color: #f7f9fa;
                background-image: url("./../../assets/images/t1.png");
                background-position: 9px 12px;
                background-repeat: no-repeat;
                background-size: 16px;

                &:hover {
                  box-shadow: 0px 2px 9px 1px rgba(10, 2, 4, 0.29);
                }

                h3 {
                  font-size: 13px;
                  font-family: PingFang SC;
                  font-weight: 400;
                  color: #4c4c4c;
                }

                p {
                  font-size: $font_16;
                  color: $menuActiveText;
                  min-height: 40px;
                  align-items: center;
                  display: flex;
                  margin-top: 10px;

                  span {
                    display: block;
                    width: 100%;
                    word-wrap: break-word;
                    font-size: 18px;
                    font-family: PingFang SC;
                    font-weight: bold;
                    color: #19b098;
                  }
                }
              }

              &:nth-child(1) .mainin_jbm,
              &:nth-child(4) .mainin_jbm,
              &:nth-child(7) .mainin_jbm {
                background-image: url("./../../assets/images/t3.png");
              }

              &:nth-child(6) .mainin_jbm {
                background-image: none;
              }

              &:nth-child(2) .mainin_jbm,
              &:nth-child(5) .mainin_jbm,
              &:nth-child(8) .mainin_jbm,
              &:nth-child(9) .mainin_jbm {
                background-image: url("./../../assets/images/t2.png");
              }

              &:nth-child(3) .mainin_jbm,
              &:nth-child(10) .mainin_jbm,
              &:nth-child(11) .mainin_jbm,
              &:nth-child(12) .mainin_jbm {
                background-image: url("./../../assets/images/t1.png");
              }
            }
          }
        }

        .mainin_jx {
          ul {
            // margin-top: 18px;
            margin-left: 10px;
            margin-right: 10px;

            li {
              width: 33.33%;

              .mainin_jxb {
                // padding-top: 10px;
                margin-top: 20px;
                // padding-bottom: 10px;
                // padding-left: 15px;
                margin-right: 20px;

                a {
                  display: block;
                  background: url("./../../assets/images/1.png") bottom 5px
                    right 5px no-repeat;
                  background-color: #f7f9fa;
                  padding: 10px 10px;
                  box-sizing: border-box;
                  background-size: 40px;

                  &:hover {
                    box-shadow: 0px 0px 9px 1px rgba(10, 2, 5, 0.42);
                  }
                }

                h3 {
                  font-size: $font_14;
                  color: $colour_18;
                  display: inline-block;
                  vertical-align: middle;

                  em {
                    display: inline-block;
                    width: 10px;
                    height: 10px;
                    border-radius: 2px;
                    background: #daaaec;
                    margin-right: 10px;
                  }
                }

                p {
                  font-size: $font_16;
                  color: $colour_18;
                  min-height: 40px;
                  align-items: center;
                  display: flex;
                  margin-top: 15px;

                  span {
                    display: block;
                    width: 100%;
                    word-wrap: break-word;

                    font-size: 16px;
                    font-family: PingFang SC;
                    font-weight: bold;
                    color: #2b2b2b;
                  }
                }
              }

              &:nth-child(2) {
                a {
                  background-image: url("./../../assets/images/2.png");
                }
              }

              &:nth-child(3) {
                a {
                  background-image: url("./../../assets/images/3.png");
                }
              }

              &:nth-child(4) {
                a {
                  background-image: url("./../../assets/images/9.png");
                }
              }

              &:nth-child(5) {
                a {
                  background-image: url("./../../assets/images/4.png");
                }
              }

              &:nth-child(6) {
                a {
                  background-image: url("./../../assets/images/5.png");
                }
              }

              &:nth-child(7) {
                a {
                  background-image: url("./../../assets/images/6.png");
                }
              }

              &:nth-child(8) {
                a {
                  background-image: url("./../../assets/images/8.png");
                }
              }

              &:nth-child(9) {
                a {
                  background-image: url("./../../assets/images/7.png");
                }
              }
            }
          }
        }

        .mainin_qxs {
          #chartColumn1 {
            margin-top: 10px;
          }
        }

        .mainin_qxk {
          background: $white;
          padding-bottom: 10px;

          .mainin_qxk_p {
            margin-top: 20px;

            ul {
              height: 332px;
              overflow-y: auto;
              padding-left: 10px;
              padding-right: 10px;

              li {
                border-bottom: 1px solid $colour_f4;
                padding-top: 10px;
                padding-bottom: 10px;

                .mainin_qxk_pl {
                  width: calc(100% - 80px);
                  position: relative;

                  .red_dot {
                    position: absolute;
                    top: 50%;
                    left: -10px;
                    width: 6px;
                    height: 6px;
                    border-radius: 50%;
                    background-color: red;
                  }

                  img {
                    width: 48px;
                    height: 48px;
                    object-fit: cover;
                    margin-right: 10px;
                    border-radius: 1000px;
                  }

                  .mainin_qxk_plw {
                    width: 80%;

                    p {
                      font-size: 14px;
                      color: #333;
                      height: 20px;
                      line-height: 20px;
                      margin-top: 5px;
                    }

                    span {
                      font-size: 14px;
                      color: #555;
                      display: block;
                      height: 20px;
                      line-height: 20px;
                      margin-top: 5px;
                    }
                  }
                }

                .mainin_qxk_pr {
                  text-align: right;
                  font-size: 14px;
                  color: #4f4f4f;

                  &.read {
                    color: #00c388;
                  }

                  p {
                    &:last-child {
                      padding-top: 8px;

                      .el-icon-arrow-right:before {
                        font-weight: 700;
                      }
                    }
                  }
                }

                &:hover {
                  cursor: pointer;
                }

                &:last-child {
                  border: 0;
                }
              }
            }
          }

          .yjfk_no_data {
            width: 100%;
            text-align: center;
            padding-top: 60px;
          }
        }

        .mainin_xlb {
          height: 285px;
          padding-bottom: 10px;

          #chartColumn1,
          #chartColumn2,
          #chartColumn3 {
            margin-top: 20px;
          }

          .mainin_xlb_p {
            border: 1px solid $colour_f4;
            margin-top: 20px;

            ul {
              height: 340px;
              overflow-y: auto;
              padding-left: 10px;
              padding-right: 10px;

              li {
                padding-top: 10px;
                padding-bottom: 10px;
                font-size: 14px;
                color: #333;

                .mainin_xlb_pw {
                  width: calc(100% - 80px);

                  p {
                    width: calc(100% - 85px);
                    margin-left: 5px;
                  }
                }

                em {
                  text-align: center;
                  color: #555;
                }
              }
            }
          }
        }
      }
    }
  }

  .mainin_xs {
    position: fixed;
    right: 0;
    top: 20%;
    z-index: 9;
    width: 54px;
    height: 54px;
    line-height: 54px;
    border-radius: 1000px;
    background: $menuActiveText;
    font-size: $font_12;
    color: $white;
    transition: all 0.5s;
    transform: translate3d(50%, 0, 0);
    box-shadow: 0px 3px 10px 0px #413f3f3d;

    i {
      font-size: 22px;
      transform: rotate(-90deg);
      vertical-align: -4px;
    }

    &:hover {
      cursor: pointer;
    }

    &.on {
      transform: translate3d(0, 0, 0);
    }
  }

  .mainin_ex {
    position: fixed;
    width: 230px;
    height: 100%;
    background: $white;
    box-shadow: 0 6px 10px rgba(0, 21, 41, 0.08);
    top: 0;
    right: 0;
    z-index: 9;
    transition: all 0.5s;
    transform: translate3d(100%, 0, 0);

    &.on {
      transform: translate3d(0, 0, 0);
    }

    .sortable-ghost {
      background: $white;
      box-shadow: 0px 2px 8px 0px #413f3f1a;
    }

    // 显示影子元素
    .sortable-chosen {
      &:hover {
        cursor: move;
      }
    }

    .mainin_exv {
      position: absolute;
      width: 100%;
      height: calc(100% - 60px);
      overflow-y: auto;

      h3 {
        font-size: $font_16;
        color: $colour_18;
        height: 50px;
        line-height: 50px;
        border-bottom: 1px solid $colour_e6;
        padding-left: 20px;
      }

      .mainin_exa {
        margin-top: 15px;

        ul {
          li {
            align-items: center;
            padding-left: 20px;
            padding-right: 10px;

            /deep/.el-checkbox {
              margin-top: 10px;
              margin-bottom: 10px;
            }

            /deep/.el-checkbox__label {
              padding-left: 15px;
            }

            .svg-icon {
              /* 通过设置 font-size 来改变图标大小 */
              font-size: $font_18;
              /* 图标和文字相邻时，垂直对齐 */
              vertical-align: -0.15em;
              /* 通过设置 color 来改变 SVG 的颜色/fill */
              fill: $colour_3;
              /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
              normalize.css 中也包含这行 */
              overflow: hidden;

              &:hover {
                cursor: move;
              }
            }
          }
        }
      }
    }

    .mainin_exb {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 55px;
      text-align: center;

      /deep/.el-button--default {
        margin-top: 12px;
        border-color: $subActive;
        color: $menuText;

        &:hover {
          border-color: $menuActiveText;
          color: $menuActiveText;
        }
      }
    }
  }

  // 为加载完数据时
  .mainin_box_nodata {
    height: calc(100vh - 60px);
    overflow: hidden;
  }
}

// 意见反馈更多
.advice_more {
  font-size: 14px;
  color: #00c388;
  text-align: right;
  float: right;
  padding-top: 8px;
  padding-right: 5px;
}

// 图片查看器
/deep/.el-dialog {
  .el-dialog__header {
    border-bottom: 1px solid #ccc;
    padding: 10px 20px 10px;
    display: flex;
    align-items: center;
  }

  .el-dialog__title {
    font-size: 16px;
    vertical-align: bottom;

    &::before {
      content: " ";
      width: 6px;
      height: 15px;
      margin-right: 15px;
      background-color: #00c388;
      display: inline-block;
      vertical-align: middle;
    }
  }

  .el-dialog__headerbtn {
    top: 15px;
  }

  .el-dialog__body {
    padding: 15px 20px 20px;
  }
}

.feedback_dialog {
  display: flex;
  flex-direction: column;

  .text {
    margin: 10px;
  }
}

.dialog_main {
  .dialog_content {
    p {
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #646464;
      line-height: 23px;
      text-indent: 2rem;
    }
  }

  .dialog_img {
    margin-top: 15px;

    /deep/.el-image {
      margin: 0 15px;
    }
  }

  .dialog_footer {
    float: right;
  }
}

/* 帮助文档 */
.tips_box {
  position: fixed;
  bottom: 10px;
  right: 10px;

  .helper_icon {
    float: right;

    img {
      width: 81px;
      height: 81px;
    }
  }

  .help_panel {
    width: 404px;
    height: 632px;
    background-color: #ffffff;
    position: relative;
    bottom: 0;
    right: 81px;
    box-shadow: 2;
    box-shadow: 0px 0px 7px 1px rgba(10, 2, 5, 0.17);

    .top {
      height: 40px;
      line-height: 40px;
      padding: 0 13px;
      text-align: center;
      background-color: #19b098;

      h3 {
        font-size: 14px;
        color: #ffffff;
        display: inline;
      }

      .close {
        float: right;
        line-height: 40px;
        color: #ffffff;
      }
    }
  }
}

.help_panel-enter-active {
  transition: opacity 0.3s;
}

.help_panel-enter {
  opacity: 0;
}

.help_panel-leave-active {
  transition: opacity 0.3s;
}

.help_panel-leave-to {
  opacity: 0;
}

/deep/.el-tabs__item:focus.is-active.is-focus:not(:active) {
  box-shadow: none !important;
}

/* 行业资讯 */
.industry_article_box {
  li {
    padding: 7px 0;
  }
}

.industry_article {
  display: flex;
  flex-direction: row;
  align-items: flex-start;

  &.tender_industry_article {
    align-items: center;
  }

  .left {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;

    p {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      line-height: 1.5;
      cursor: pointer;

      &:first-child {
        font-size: 15px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #070707;
      }

      &:last-child {
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #777373;
      }
    }
  }

  .right {
    width: 100px;
    text-align: right;
    height: 12px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #9c9c9c;
    padding-left: 10px;
  }

  .tender_right {
    height: 100%;
    text-align: none;
    display: flex;
    justify-content: center;
    flex-direction: column;
  }
}

/* 更新记录 */
.upgrade {
  display: flex;
  flex-direction: row;
  align-items: flex-start;

  .left {
    width: 175px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #9c9c9c;
  }

  .right {
    flex: 1;
    // white-space: nowrap;
    overflow: hidden;

    p {
      // white-space: nowrap;
      // overflow: hidden;
      // text-overflow: ellipsis;

      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #070707;
    }
  }
}

/* 帮助中心 */
.help_center {
  height: 340px;
  position: relative;

  .image_top {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding-top: 60px;

    .left,
    .right {
      padding: 0 50px;
      text-align: center;
    }

    img {
      width: 100px;
    }

    p {
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #767676;
      line-height: 23px;
      padding-top: 20px;
    }
  }

  .link_bottom {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 30px;

    p {
      width: 100%;
      text-align: center;
      font-size: 18px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #19b098;
    }
  }
}

/* 天气 */
.weather {
  width: 100%;
  height: 340px;
}

/* 预警 */
.warning_container {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;

  .warning_item {
    width: 146px;
    height: 82px;
    background: url("./../../assets/images/warning_bg.png") no-repeat;
    background-size: 100% 100%;
    padding: 18px 17px;
    margin-right: 20px;
    margin-bottom: 20px;

    p {
      &:first-child {
        font-size: 22px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #363636;

        span {
          font-size: 16px;
        }
      }

      &:last-child {
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #bbbbbb;
        margin-top: 8px;
      }
    }

    h3 {
      font-size: 18px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #363636;
      line-height: 1.5;
      cursor: pointer;
    }
  }
}

.up_data {
  position: fixed;
  top: 5%;
  z-index: 99999;
  cursor: pointer;
}

.up_Pic {
  position: relative;
  height: auto;
}

.up_img {
  width: 100px;
}

.up_txt {
  position: absolute;
  color: red;
  right: 6px;
  top: 66px;
  font-size: 16px;
}

/* 在线客服 */
.cust_box {
  position: fixed;
  bottom: 6%;
  right: 80px;
  z-index: 5;
  transition: all 0.5s;
  transform: translate3d(100%, 0, 0);
  background-color: white;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-content: center;
  justify-content: center;
  box-shadow: 0px 3px 10px 0px #413f3f3d;

  &.on {
    transform: translate3d(0, 0, 0);
    right: 40px;
  }

  img {
    width: 40px;
    height: 40px;
    margin-top: 10px;
    cursor: pointer;
  }
}

#qrcode {
  width: 150px;
  height: 150px;
  margin: 0 auto;
}

.help_panels {
  position: fixed;
  width: 350px;
  height: 500px;
  background-color: #ffffff;
  right: 88px;
  bottom: 5%;
  box-shadow: 0px 0px 7px 1px rgba(10, 2, 5, 0.17);

  .top {
    height: 40px;
    line-height: 40px;
    padding: 0 13px;
    text-align: center;
    background-color: #19b098;

    h3 {
      font-size: 14px;
      color: #ffffff;
      display: inline;
    }

    .close {
      float: right;
      line-height: 40px;
      color: #ffffff;
    }
  }

  .main_container {
    height: 360px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
}

.wx_style {
  background-color: #4fa388;
  color: white;
  padding: 6px 15px;
  border-radius: 20px;
  margin-top: 15px;
  font-size: 14px;
}

.card {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 99px);
  grid-gap: 14px;
  padding: 12px 16px 12px 15px;
  .cardBox {
    padding: 15px;
    display: flex;
    flex-direction: row;
    // justify-content: flex-start;
    background: #f7faf7;
    border-radius: 10px;
    height: 100%;
    img {
      width: 100%;
      height: 100%;
    }
    .cardBox_span {
      margin-left: 9px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      &-title {
        font-weight: 500;
        font-size: $ordinary_font_size;
        color: $auxiliary_font_color;
      }
      &-num {
        margin-top: 18px;
        font-size: $theme_font_size;
        color: $theme_font_color;
        font-weight: 800;
      }
    }
    &:hover {
      cursor: pointer;
      box-shadow: 0px 0px 8px 0px rgba(4, 0, 0, 0.1);
    }
  }
  .nullCardBox {
    min-height: 79px;
    padding: 12px 15px 12px 40px;
    align-items: flex-end;
    display: flex;
    background: #f7faf7;
    border-radius: 10px;
    height: 100%;
    &-title {
      color: $theme_font_color;
      font-weight: 800;
      font-size: $theme_font_size;
      letter-spacing: 5px;
    }
    &:hover {
      cursor: pointer;
      box-shadow: 0px 0px 8px 0px rgba(4, 0, 0, 0.1);
    }
  }
}

.cards {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 99px);
  grid-gap: 14px;
  padding: 12px 16px 12px 15px;

  .cardBox {
    display: flex;
    flex-direction: column;
    background: #f7faf7;
    border-radius: 10px;
    height: 100%;
    padding: 15px;
    &-title {
      font-size: $ordinary_font_size;
      font-weight: 500;
      color: $auxiliary_font_color;
    }
    &-content {
      margin-top: 16px;
      width: 100%;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      &-num {
        font-size: 24px;
        font-weight: 500;
        color: $auxiliary_font_color;
        margin-right: 10px;
      }
    }
    &:hover {
      box-shadow: 0px 0px 8px 0px rgba(4, 0, 0, 0.1);
      cursor: pointer;
    }
  }
}
.card_yujing {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 90px);
  grid-gap: 14px;
  padding: 12px 16px 12px 15px;
  .yujingcatd {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #f7faf7;
    border-radius: 10px;
    background-image: url("../../assets/homePage/beijinkuang.png");
    background-size: 100% 100%;
    height: 100%;
    padding: 20px;
    &-num {
      font-size: $special_font_size;
      color: $auxiliary_font_color;
      font-weight: 500;
    }
    &-title {
      font-size: $ordinary_font_size;
      color: $auxiliary_font_color;
      font-weight: 500;
    }
  }
}

.yijian {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  &:hover {
    cursor: pointer;
  }
}

.bangzhu {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  // .bangzhus {
  //   display: flex;
  //   flex-direction: row;
  //   justify-content: space-between;
  //   align-items: center;
  //   padding: 15px 24px;
  //   width: 100%;
  //   .bangzhudata {
  //     display: flex;
  //     flex-direction: row;
  //     justify-self: flex-start;
  //     align-items: center;
  //     justify-content: center;
  //     &-title {
  //       margin-left: 7px;
  //       font-size: $ordinary_font_size;
  //       font-weight: 500;
  //       color: $auxiliary_font_color;
  //     }
  &:hover {
    cursor: pointer;
  }
  //   }

  // }
  // .title {
  //   font-size: $ordinary_font_size;
  //   font-weight: 500;
  //   color: #03a98e;
  //   &:hover {
  //     cursor: pointer;
  //   }
  // }
  img {
    width: 100%;
    height: 100%;
  }
}

.hangyezixun {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 4px 4px 4px 0;
  overflow-y: auto;
  &-box {
    width: 100%;
    height: 54px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border-bottom: 1px solid #eeeeee;
    &-left {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 100%;
      &-top {
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: $ordinary_font_size;
        font-weight: 500;
        color: $auxiliary_font_color;
      }
      &-bottom {
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: $smallOrdinary_font_size;
        font-weight: 500;
        color: $more_font_color;
        margin-top: 4px;
      }
    }
    &-right {
      font-size: $ordinary_font_size;
      font-weight: 500;
      color: $more_font_color;
      text-align: right;
      display: block;
    }
  }
  &:hover {
    cursor: pointer;
  }
}

.gengxinshijian {
  font-size: $ordinary_font_size;
  font-weight: 500;
  color: $more_font_color;
}
.gengxinneirong {
  font-size: $ordinary_font_size;
  font-weight: 500;
  color: $auxiliary_font_color;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.boxdq {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start !important;
}

.boxd {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
/deep/.el-button--primary {
  background: $theme_font_color !important;
}
</style>
